<template>
  <div class="basicinfor" v-loading="loading">
    <div class="search d-between">
      <div class="d-start">
        <div class="d-center" style="margin-right:10px;">
          <el-button
            size="medium"
            type="info"
            @click="search()"
            icon="el-icon-refresh"
            style="width:36px;height:36px;padding:0;"
          ></el-button>
          <el-button size="medium" type="primary" @click="add()">新增</el-button>
        </div>
        <div class="d-center" style="margin-right:10px;">
          <el-button size="medium" :type="selectData.length>0?'danger':'info'" @click="del()">删除</el-button>
        </div>
        <div class="d-center" style="margin-right:10px;">
          <el-button
            size="medium"
            type="info"
            plain
            @click="exportExcel"
            v-if="tableData.length"
          >导出Excel</el-button>
        </div>
      </div>
      <div class="d-end top-search">
        <div class="input d-center" style="margin-right:10px;">
          <el-input size="medium" v-model="dwmc" placeholder="请输入内容">
            <template slot="prepend">企业名称：</template>
          </el-input>
        </div>
        <div class="input d-center"  :title="xmmc">
          <!-- <template slot="prepend">项目：</template> -->
          <span class="select-gray d-center">项目：</span>
          <el-select size="medium" v-model="xmid" slot="append" placeholder="请选择" @change="selXm">
            <el-option
              :value="item.id.toString()"
              v-for="item in resdata"
              :key="item.id"
              :label="item.xmmc"
            ></el-option>
            <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
          </el-select>
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button size="medium" type="info" plain @click="page = 1;search()">搜索</el-button>
          <!-- style="width:36px;height:36px;padding:0;" -->
          <!-- icon="el-icon-search" -->
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button
            size="medium"
            type="info"
            plain
            @click="page = 1;dwmc = '';xmid = '';search()"
          >重置</el-button>
        </div>
      </div>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%;"
        height="100%"
        @selection-change="handleSelectionChange"
        ref="table"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span>{{(scope.$index + 1)+((page-1)*pageSize)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="企业名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" @click="look(scope.row)">{{scope.row.dwmc}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="clsj" label="成立日期" align="center"></el-table-column>
        <el-table-column prop="ygrs" label="企业人数" align="center"></el-table-column>
        <el-table-column prop="zjl" label="总经理" align="center"></el-table-column>
        <el-table-column prop="jsfzr" label="技术负责人" align="center"></el-table-column>
        <!-- <el-table-column prop="frxm" label="法人姓名" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="zzjgdm" label="组织机构代码" align="center" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="qyzz" label="企业资质" align="center"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="join_qyxmll" label="参与项目" align="center"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.join_qyxmll.length}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" plain @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="d-center"
      style="margin-top:10px"
      :page-size="pageSize"
      :current-page="page"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <newProject
      :dialogFormVisible1="dialogFormVisible1"
      @close="close1"
      :item="item"
      :resdata="resdata"
      :lookOrEdit="lookOrEdit"
    />
    <transition name="delpop">
      <delPop @close="visible = false" v-if="visible" :data="deldata" />
    </transition>
  </div>
</template>

<script>
import newProject from "./newProject";
import delPop from "@/components/delPop";

export default {
  name: "Basicinfor",
  components: {
    newProject,
    delPop
  },
  data() {
    return {
      dwmc: "",
      xmid: "",
      dialogFormVisible1: false,
      tableData: [],
      selectData: [],
      item: {},
      resdata: [],
      lookOrEdit: 1, // 1为新增 2为编辑 3为查看
      total: 1000,
      pageSize: 10,
      page: 1,
      loading: false,
      visible: false,
      deldata: {},
      xmmc:''
    };
  },
  methods: {
    selXm(){
      this.resdata.forEach(v=>{
        if(v.id == this.xmid){
          this.xmmc = v.xmmc
        }
      })
    },
    handleCurrentChange(value) {
      this.page = value;
      this.search();
      // this.$refs.table.scrollTop = 0;
    },
    edit(item) {
      this.item = { ...item };
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.lookOrEdit = 2;
    },
    look(item) {
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.item = { ...item };
      this.lookOrEdit = 3;
    },
    close1(item) {
      this.dialogFormVisible1 = false;
      if (item) {
        this.search();
      }
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    add() {
      this.item = {};
      this.lookOrEdit = 1;
      this.dialogFormVisible1 = !this.dialogFormVisible1;
    },
    del() {
      if (!this.selectData.length) {
        this.$message({
          type: "error",
          message: "没有选中的条目"
        });
        return;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$post("/api/Enterprise/deletesall", {
            id: this.selectData
          }).then(res => {
            if (res.code == 200) {
              this.deldata = res.data;
              setTimeout(() => {
                this.visible = true;
              }, 400);
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    search() {
      this.loading = true;
      this.$get("/api/enterprise/index", {
        xmid: this.xmid,
        dwmc: this.dwmc,
        page: this.page
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.resdata = res.data.project;
          this.tableData = res.data.list;
        }
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.loading = false;
      });
    },
    exportExcel() {
      let userId = window.localStorage.userid;
      let project_ids = [];
      if (this.selectData.length > 0) {
        this.selectData.forEach(item=>{
          project_ids.push(item.id)
        })
      }
      window.open(
        `${this.$updata}/api/Enterprise/exports?dwmc=${this.dwmc}&xmid=${this.xmid}&userid=${userId}&project_ids=${project_ids.join(',')}`
      );
    }
  },
  mounted() {
    this.search();
  }
};
</script>

<style lang="less" scoped>
.basicinfor {
  width: 100%;
  height: calc(100%);
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 5px;
    position: relative;
    .input {
      max-width: 250px;
      margin-left: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    //   width: 100%;
    height: calc(92% - 60px);
    // overflow-y: scroll;
    // position: absolute
    border: 1px solid #ebeef5;
  }
}
</style>